<template>
  <tbc-dialog :title="(form.brand_id ? '编辑':'添加') + '品牌'" ref="dialog" @confirm="formSubmit">
    <el-form label-position="top" class="compact">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称">
            <el-input v-model="form.brand_name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="首字母">
            <el-input v-model="form.first_letter"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="品牌LOGO">
            <template v-slot:label>
              <div>
                <label class="">品牌LOGO</label>
                <span style="color:#909090;">（标准尺寸200*88）</span>
              </div>
            </template>
            <el-input v-model="form.brand_logo">
              <template v-slot:append>
                <el-button icon="el-icon-upload" @click="$refs.file.show()">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="排序">
            <el-input v-model="form.sort_weight"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="网站">
            <el-input v-model="form.brand_site">
              <template #prepend>http://</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">使用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="描述">
        <el-input type="textarea" rows="4" v-model="form.brand_desc"></el-input>
      </el-form-item>

    </el-form>

  </tbc-dialog>
  <tbc-file-manager ref="file" @select="onFileSelected"/>
</template>
<script lang="ts">

import {defineComponent, reactive, Ref, ref, toRefs} from "vue";
import useGoodsBrand from './api/goodsBrand'

export default defineComponent({

  name: 'goods-brand-form',


  emits: ['success'],

  setup(props, {emit}) {
    const brand = useGoodsBrand()
    const dialog: Ref = ref(null)
    const state = reactive({
      form: {brand_id: '', brand_logo: ''},
      base: {
        brand_id: '', brand_name: '', brand_logo: '', brand_site: '', status: 1,
        sort_weight: 50, first_letter: '', brand_desc: ''
      }
    })

    // 显示表单
    const show = (data: { [k: string]: string | null } | undefined): void => {
      dialog.value.show()
      state.form = {...state.base, ...data}
      // if (data) for (let i in state.form) if (typeof data[i] !== 'undefined') (state.form as any)[i] = data[i]
    }

    const close = () => {
      dialog.value.close()
    }

    const formSubmit = async () => {
      const res = await brand.update(state.form)
      if (res.data.code !== 0) return
      emit('success')
      close()
    }

    const onFileSelected = (fileList) => {
      if (!fileList.length) return
      state.form.brand_logo = fileList[0].file_url
    }

    return {...toRefs(state), dialog, show, formSubmit, onFileSelected}
  }
})
</script>